import { QuestionType } from '@/components/question/typing';
import { Empty, TabPane, Tabs } from 'ant-design-vue';
import { AnyObject } from 'ant-design-vue/es/_util/type';
import { defineComponent, PropType, ref, VNode } from 'vue';
import EndPageQuestionAttributePanel from './end-page-question-attribute-panel';
import MapQuestionAttributePanel from './map-question-attribute-panel';
import MultipleChoiceQuestionAttributePanel from './multiple-choice-question-attribute-panel';
import PagingQuestionAttributePanel from './paging-question-attribute-panel';
import ParagraphQuestonAttributePanel from './paragraph-queston-attribute-panel';
import ScaleQuestionAttributePanel from './scale-question-attribute-panel';
import ShortAnswerQuestionAttributePanel from './short-answer-question-attribute-panel';
import SingleChoiceQuestionAttributePanel from './single-choice-question-attribute-panel';
import StartPageQuestionAttributePanel from './start-page-question-attribute-panel';
import './style.css';

const attributeDesignPanelComponents: AnyObject = {
  single: SingleChoiceQuestionAttributePanel,
  multiple: MultipleChoiceQuestionAttributePanel,
  map: MapQuestionAttributePanel,
  scale: ScaleQuestionAttributePanel,
  answer: ShortAnswerQuestionAttributePanel,
  paragraph: ParagraphQuestonAttributePanel,
  paging: PagingQuestionAttributePanel,
  startPage: StartPageQuestionAttributePanel,
  endPage: EndPageQuestionAttributePanel,
};

export default defineComponent({
  props: {
    question: Object as PropType<QuestionType>,
    language: Array<string>,
  },
  setup(props) {
    const { question, language } = props;
    const activeTabKey = ref(question?.activeDesignLanguage);

    const onTabsChange = () => {
      if (question) {
        question.activeDesignLanguage = activeTabKey.value;
      }
    };

    const createQuestionAttributePanel = (language: string): VNode => {
      if (!question) {
        return <Empty />;
      }
      let component: VNode = attributeDesignPanelComponents[question.type];
      let componentProps: any = {
        question,
        language,
      };
      if (question.type === 'map') {
        componentProps = {
          ...componentProps,
        };
      }
      component = <component {...componentProps} />;
      return component;
    };

    return () => {
      return (
        <div class="question-attribute-panel">
          <div class="question-attribute-panel-container">
            <div class="attribute-title">题目属性</div>
            <Tabs
              class="attribute-panel-tabs"
              v-model:activeKey={activeTabKey.value}
              onChange={onTabsChange}
              key={`attribute-tabs-${question?.id}-${question?.activeDesignLanguage}`}
            >
              {language?.map((eachLanguage: string) => {
                return (
                  <TabPane key={eachLanguage} tab={eachLanguage === 'zh' ? '中文' : '英文'}>
                    <div class="attribute-panel-tab-pane">
                      {createQuestionAttributePanel(eachLanguage)}
                    </div>
                  </TabPane>
                );
              })}
            </Tabs>
          </div>
        </div>
      );
    };
  },
});
